/*
 * @Descripttion:
 * @version:
 * @Author:
 * @Date: 2021-10-27 14:28:44
 */
import { defineConfig } from 'windicss/helpers'
import plugin from 'windicss/plugin'

export default defineConfig({
  darkMode: 'class', // or 'media'
  theme: {
    spacing: {
      0: '0px',
      1: '1px',
      2: '2px',
      3: '3px',
      4: '4px',
      5: '5px',
      6: '6px',
      7: '7px',
      8: '8px',
      9: '9px',
      10: '10px',
      11: '11px',
      12: '12px',
      13: '13px',
      14: '14px',
      15: '15px',
      16: '16px',
      17: '17px',
      18: '18px',
      19: '19px',
      20: '20px',
      40: '40px'
    },
    lineHeight: {
      0: '0px',
      1: '1px',
      2: '2px',
      3: '3px',
      4: '4px',
      5: '5px',
      6: '6px',
      7: '7px',
      8: '8px',
      9: '9px',
      10: '10px',
      11: '11px',
      12: '12px',
      13: '13px',
      14: '14px',
      15: '15px',
      16: '16px',
      17: '17px',
      18: '18px',
      19: '19px',
      20: '20px',
      40: '40px'
    },
    extend: {
      fontSize: {
        xs: '12px',
        sm: '14px',
        base: '16px',
        lg: '18px',
        xl: '20px',
        '2xl': '22px',
        '3xl': '24px',
        '4xl': '26px',
        '5xl': '28px'
      },
      colors: {
        orange: '#FF923A',
        grey: '#999999',
        blue: '#325FDC'
      },

      fontFamily: {
        sans: ['Graphik', 'sans-serif'],
        serif: ['Merriweather', 'serif']
      }
    }
  },
  plugins: [
    plugin(({ addUtilities }) => {
      const newUtilities = {
        '.skew-10deg': {
          transform: 'skewY(-10deg)'
        },
        '.skew-15deg': {
          transform: 'skewY(-15deg)'
        }
      }
      addUtilities(newUtilities)
    }),
    plugin(({ addComponents }) => {
      const borders = {
        '.border-top': {
          borderTop: '0.01rem',
          borderStyle: 'solid',
          borderColor: '#dddddd'
        },
        '.border-bottom': {
          borderBottom: '0.01rem',
          borderStyle: 'solid',
          borderColor: '#dddddd'
        },
        '.justify-between-center': {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        },
        '.justify-around-center': {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-around'
        },
        '.justify-center-center': {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }
        // '.btn-red': {
        //   backgroundColor: '#e3342f',
        //   color: '#fff',
        //   '&:hover': {
        //     backgroundColor: '#cc1f1a'
        //   }
        // }
      }
      addComponents(borders)
    })
  ]
})
